<template>
    <el-row class="row">
        <el-col class="left" :span="4"
            ><img class="img" :src="data.momentBackup.cover[0]" />
            <img class="anniu" src="@/assets/discovery/release_play@3x.fb313c4d.png" />
        </el-col>
        <el-col :span="15">
            <div class="center">
                <div class="title">{{ data.momentTitle }}</div>
                <div class="intr">动态</div>
                <div class="author">
                    <img
                        :src="data.momentBackup.creatorBackup.avatar"
                        class="avatal"
                    />
                    <div class="name">
                        {{ data.momentBackup.creatorBackup.name }}
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="2">
            <div class="time">{{ time }}</div>
        </el-col>
        <el-col :span="2">
            <div v-show="props.isshow" class="right">
                <el-button text @click="open">删除</el-button>
            </div>
            <input
                @change="onechangge"
                v-show="!props.isshow"
                type="checkbox"
                :checked="props.ischecked"
                class="checkbox"
            />
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { computed, onMounted, ref } from "vue";
import moment from "moment";

const props = defineProps(["ischecked", "data", "isshow", "dataid"]);
const emit = defineEmits(["update:modelValue", "pusharr", "delone"]);

const onechangge = () => {
    emit("pusharr", props.dataid);
};
const time = computed(() => {
    if (!props.data.createTime || props.data.createTime < 0) return "";
    const days = moment().diff(
        moment(props.data.createTime).startOf("day"),
        "days"
    );
    if (days === 0) return moment(props.data.createTime).format("HH:mm");
    if (days === 1)
        return `昨天 ${moment(props.data.createTime).format("HH:mm")}`;
    return moment(props.data.createTime).format("MM-DD");
   
});
const open = () => {
    ElMessageBox.confirm("此操作将删除该项, 是否继续?", "Warning", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            ElMessage({
                type: "success",
                message: "删除成功",
            });
            emit("delone", props.dataid);
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
};
</script>

<style lang="less" scoped>
.row {
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    margin-top: 10px;

    .left.el-col-4 {
        width: 169px;
        height: 101px;
        margin-right: 20px;
        border-radius: 4px;
        max-width: 169px;
        flex: 1;
        position: relative;
        .img {
            width: 100%;
            height: 100%;
        }
        .anniu {
            position: absolute;
            bottom: 6px;
            left: 10px;
            width: 30px;
            height: 30px;
        }
    }
    :deep(.right) {
        text-align: center;
        position: relative;
        top: 30px;
        left: 30px;
        color: #b1b3bc;
        cursor: pointer;
        font-size: 14px;
        .el-button > span {
            color: #b1b3bc;
        }
        .el-button > span:hover {
            color: #f93684;
        }
        .el-button {
            :deep(.el-button--primary) {
                background-color: #f93684;
                border-color: #f93684;
            }
        }
    }
    .checkbox {
        position: relative;
        top: 30px;
        left: 30px;
        // background-image: url('@/assets/images/123.png');
    }
    .center {
        display: flex;
        flex-direction: column;
        .title {
            font-size: 16px;
            color: #111;
        }
        .intr {
            font-size: 14px;
            color: rgb(125, 128, 144);
            margin: 20px 0;
        }
        .author {
            display: flex;
            align-items: center;
            .avatal {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 11px;
                object-fit: cover;
            }
            .name {
                font-size: 16px;
                color: #111;
            }
        }
    }
    .el-col-2 {
        color: rgb(17, 17, 17);
        font-size: 14px;
        text-align: center;
        position: relative;
        .time {
            position: absolute;
            top: 30px;
            left: 10px;
        }
    }
}
</style>
